 <template>
  <view class="flash-sale-container">
    <!-- 顶部导航栏 -->
    <u-navbar
      title="限时抢购"
      :border-bottom="false"
      bg-color="#ffffff"
      title-color="#000000"
      :left-icon="'arrow-left'"
      @left-click="goBack"
    >
      <view slot="right" class="navbar-right">
        <u-icon name="more-dot-fill" size="20" color="#666" @click="showMoreOptions"></u-icon>
        <u-icon name="setting" size="20" color="#666" @click="showSettings" style="margin-left: 15px;"></u-icon>
      </view>
    </u-navbar>

    <!-- 主横幅图片 -->
    <view class="banner-section">
      <image class="banner-image" src="/static/flash-sale-banner.jpg" mode="aspectFill"></image>
    </view>

    <!-- 时间段选择 -->
    <view class="time-slots-section">
      <scroll-view scroll-x="true" class="time-slots-scroll">
        <view class="time-slots-container">
          <view 
            v-for="(slot, index) in timeSlots" 
            :key="index"
            class="time-slot-item"
            :class="{ 'active': slot.isActive }"
            @click="selectTimeSlot(index)"
          >
            <text class="time-text" :class="{ 'active-text': slot.isActive }">{{ slot.time }}</text>
            <text class="status-text" :class="{ 'active-status': slot.isActive }">{{ slot.status }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 商品列表 -->
    <view class="products-section">
             <view 
         v-for="(product, index) in products" 
         :key="index"
         class="product-item"
         @click="goToProductDetail(product, index)"
       >
        <view class="product-image-container">
          <image class="product-image" :src="product.image" mode="aspectFill"></image>
        </view>
        <view class="product-info">
          <text class="product-title">{{ product.title }}</text>
          <view class="price-container">
            <text class="flash-price">限时价: ¥{{ product.flashPrice }}</text>
            <text class="original-price">原价¥{{ product.originalPrice }}</text>
          </view>
          <view class="action-section">
            <!-- 左侧：抢购进度显示 -->
            <view class="progress-section">
              <view v-if="product.status === 'not-started'" class="quantity-info">
                <text class="quantity-text">限量{{ product.totalQuantity }}件</text>
              </view>
              <view v-else-if="product.status === 'in-progress'" class="progress-info">
                <view class="progress-bar-container">
                  <view class="progress-bar">
                    <view 
                      class="progress-fill" 
                      :style="{ width: (product.soldQuantity / product.totalQuantity * 100) + '%' }"
                    ></view>
                  </view>
                  <view class="progress-text">
                    <text class="sold-text">已抢{{ product.soldQuantity }}件</text>
                    <text class="remaining-text">仅剩{{ product.totalQuantity - product.soldQuantity }}件</text>
                  </view>
                </view>
              </view>
              <view v-else-if="product.status === 'ended'" class="quantity-info">
                <text class="quantity-text">已售罄</text>
              </view>
            </view>
            
            <!-- 右侧：抢购按钮 -->
            <view class="button-section">
                             <u-button 
                 v-if="product.status === 'not-started'"
                 type="primary" 
                 size="mini" 
                 class="buy-button"
                 @click="setReminder(index)"
               >
                 开抢提醒
               </u-button>
               <u-button 
                 v-else-if="product.status === 'in-progress'"
                 type="primary" 
                 size="mini" 
                 class="buy-button"
                 @click="buyNow(index)"
               >
                 马上抢
               </u-button>
              <u-button 
                v-else-if="product.status === 'ended'"
                type="default" 
                size="mini" 
                class="buy-button disabled"
                disabled
              >
                已售罄
              </u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more-section">
      <u-loadmore 
        :status="loadMoreStatus" 
        :loading-text="loadingText"
        :loadmore-text="loadMoreText"
        :nomore-text="noMoreText"
        @loadmore="loadMore"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timeSlots: [
        { time: '10:00', status: '已开抢', isActive: false, type: 'ended' },
        { time: '14:00', status: '抢购中', isActive: true, type: 'in-progress' },
        { time: '16:00', status: '即将开始', isActive: false, type: 'upcoming' },
        { time: '22:00', status: '即将开始', isActive: false, type: 'upcoming' },
        { time: '明日', status: '即将', isActive: false, type: 'upcoming' }
      ],
      products: [
        {
          title: '薄款V领针织衫',
          flashPrice: '30',
          originalPrice: '38',
          totalQuantity: 200,
          soldQuantity: 2,
          status: 'not-started',
          image: '/static/product1.jpg'
        },
        {
          title: '一字肩格纹衬衫',
          flashPrice: '44',
          originalPrice: '55',
          totalQuantity: 200,
          soldQuantity: 156,
          status: 'in-progress',
          image: '/static/product2.jpg'
        },
        {
          title: '双耳环时尚配饰',
          flashPrice: '25',
          originalPrice: '35',
          totalQuantity: 150,
          soldQuantity: 0,
          status: 'not-started',
          image: '/static/product3.jpg'
        }
      ],
      // 不同时间段的商品数据
      timeSlotProducts: {
        'ended': [
          {
            title: '薄款V领针织衫',
            flashPrice: '30',
            originalPrice: '38',
            totalQuantity: 200,
            soldQuantity: 200,
            status: 'ended',
            image: '/static/product1.jpg'
          },
          {
            title: '一字肩格纹衬衫',
            flashPrice: '44',
            originalPrice: '55',
            totalQuantity: 200,
            soldQuantity: 200,
            status: 'ended',
            image: '/static/product2.jpg'
          },
          {
            title: '双耳环时尚配饰',
            flashPrice: '25',
            originalPrice: '35',
            totalQuantity: 150,
            soldQuantity: 150,
            status: 'ended',
            image: '/static/product3.jpg'
          }
        ],
        'in-progress': [
          {
            title: '薄款V领针织衫',
            flashPrice: '30',
            originalPrice: '38',
            totalQuantity: 200,
            soldQuantity: 180,
            status: 'in-progress',
            image: '/static/product1.jpg'
          },
          {
            title: '一字肩格纹衬衫',
            flashPrice: '44',
            originalPrice: '55',
            totalQuantity: 200,
            soldQuantity: 156,
            status: 'in-progress',
            image: '/static/product2.jpg'
          },
          {
            title: '双耳环时尚配饰',
            flashPrice: '25',
            originalPrice: '35',
            totalQuantity: 150,
            soldQuantity: 120,
            status: 'in-progress',
            image: '/static/product3.jpg'
          }
        ],
        'upcoming': [
          {
            title: '薄款V领针织衫',
            flashPrice: '30',
            originalPrice: '38',
            totalQuantity: 200,
            soldQuantity: 0,
            status: 'not-started',
            image: '/static/product1.jpg'
          },
          {
            title: '一字肩格纹衬衫',
            flashPrice: '44',
            originalPrice: '55',
            totalQuantity: 200,
            soldQuantity: 0,
            status: 'not-started',
            image: '/static/product2.jpg'
          },
          {
            title: '双耳环时尚配饰',
            flashPrice: '25',
            originalPrice: '35',
            totalQuantity: 150,
            soldQuantity: 0,
            status: 'not-started',
            image: '/static/product3.jpg'
          }
        ]
      },
      // 分页相关数据
      page: 1,
      pageSize: 10,
      hasMore: true,
      loadMoreStatus: 'loadmore', // loadmore, loading, nomore
      loadingText: '正在加载...',
      loadMoreText: '上拉加载更多',
      noMoreText: '没有更多数据了'
    }
  },
  computed: {
    currentTimeSlotType() {
      const activeSlot = this.timeSlots.find(slot => slot.isActive)
      return activeSlot ? activeSlot.type : 'upcoming'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    showMoreOptions() {
      uni.showToast({
        title: '更多选项',
        icon: 'none'
      })
    },
    showSettings() {
      uni.showToast({
        title: '设置',
        icon: 'none'
      })
    },
    selectTimeSlot(index) {
      // 重置所有时间段状态
      this.timeSlots.forEach((slot, i) => {
        slot.isActive = i === index
      })
      
      // 根据选择的时间段更新商品列表
      this.updateProductsByTimeSlot(index)
    },
    updateProductsByTimeSlot(timeSlotIndex) {
      // 根据选择的时间段更新商品列表
      const selectedSlot = this.timeSlots[timeSlotIndex]
      const slotType = selectedSlot.type
      
      // 重置分页数据
      this.page = 1
      this.hasMore = true
      this.loadMoreStatus = 'loadmore'
      
      if (this.timeSlotProducts[slotType]) {
        this.products = JSON.parse(JSON.stringify(this.timeSlotProducts[slotType]))
      }
      
      console.log('选择时间段:', timeSlotIndex, '类型:', slotType)
    },
    setReminder(productIndex) {
      const product = this.products[productIndex]
      uni.showModal({
        title: '设置提醒',
        content: `已为"${product.title}"设置开抢提醒`,
        showCancel: false,
        confirmText: '确定'
      })
    },
         buyNow(productIndex) {
       const product = this.products[productIndex]
       uni.showModal({
         title: '确认购买',
         content: `确定要购买"${product.title}"吗？`,
         success: (res) => {
           if (res.confirm) {
             // 模拟购买逻辑
             if (product.soldQuantity < product.totalQuantity) {
               product.soldQuantity++
               uni.showToast({
                 title: '购买成功！',
                 icon: 'success'
               })
             } else {
               product.status = 'ended'
               uni.showToast({
                 title: '商品已售罄',
                 icon: 'none'
               })
             }
           }
         }
       })
     },
     
     goToProductDetail(product, index) {
       // 跳转到商品详情页，传递商品ID
       uni.navigateTo({
         url: `/pages/product-detail/index?id=${index + 1}`
       })
     },
    // 上拉加载更多
    loadMore() {
      if (this.loadMoreStatus === 'loading' || !this.hasMore) {
        return
      }
      
      this.loadMoreStatus = 'loading'
      
      // 模拟异步加载数据
      setTimeout(() => {
        this.loadMoreProducts()
      }, 1000)
    },
    
    // 加载更多商品数据
    loadMoreProducts() {
      const currentType = this.currentTimeSlotType
      const allProducts = this.timeSlotProducts[currentType] || []
      
      // 计算当前应该显示的商品数量
      const currentCount = this.page * this.pageSize
      
      if (currentCount >= allProducts.length) {
        // 没有更多数据了
        this.hasMore = false
        this.loadMoreStatus = 'nomore'
        return
      }
      
      // 获取下一页的数据
      const nextPageProducts = allProducts.slice(0, currentCount + this.pageSize)
      
      // 更新商品列表
      this.products = JSON.parse(JSON.stringify(nextPageProducts))
      this.page++
      
      // 检查是否还有更多数据
      if (currentCount + this.pageSize >= allProducts.length) {
        this.hasMore = false
        this.loadMoreStatus = 'nomore'
      } else {
        this.loadMoreStatus = 'loadmore'
      }
    }
  },
  
  // 页面生命周期
  onReachBottom() {
    // 触底时自动加载更多
    this.loadMore()
  }
}
</script>

<style lang="scss" scoped>
.flash-sale-container {
  background-color: #ffffff;
  min-height: 100vh;
}

.navbar-right {
  display: flex;
  align-items: center;
  padding-right: 15px;
}

.banner-section {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.time-slots-section {
  padding: 15px 0;
  background-color: #f8f8f8;
}

.time-slots-scroll {
  white-space: nowrap;
}

.time-slots-container {
  display: flex;
  padding: 0 15px;
}

.time-slot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 60px;
  margin-right: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 8px;
  
  &.active {
    background: linear-gradient(135deg, #1abc9c, #16a085);
    
    .time-text,
    .status-text {
      color: #ffffff;
    }
  }
}

.time-text {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 4px;
  
  &.active-text {
    color: #ffffff;
  }
}

.status-text {
  font-size: 12px;
  color: #666666;
  
  &.active-status {
    color: #ffffff;
  }
}

.products-section {
  padding: 15px;
}

.product-item {
  display: flex;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-image-container {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.price-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.flash-price {
  font-size: 16px;
  font-weight: bold;
  color: #1abc9c;
  margin-right: 8px;
}

.original-price {
  font-size: 14px;
  color: #999999;
  text-decoration: line-through;
}

.quantity-text {
  font-size: 12px;
  color: #666666;
  margin-bottom: 8px;
}

.action-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.progress-section {
  flex: 1;
  margin-right: 15px;
}

.quantity-info {
  display: flex;
  align-items: center;
}

.progress-info {
  width: 100%;
}

.progress-bar-container {
  width: 100%;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background-color: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1abc9c, #16a085);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sold-text {
  font-size: 12px;
  color: #1abc9c;
  font-weight: bold;
}

.remaining-text {
  font-size: 12px;
  color: #666666;
}

.button-section {
  flex-shrink: 0;
}

.buy-button {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  min-width: 80px;
  background: linear-gradient(135deg, #1abc9c, #16a085) !important;
  border: none !important;
  color: #ffffff !important;
  
  &:hover {
    background: linear-gradient(135deg, #16a085, #138d75) !important;
  }
  
  &.disabled {
    background: #cccccc !important;
    color: #999999 !important;
  }
}

.load-more-section {
  padding: 20px 0;
  text-align: center;
}
</style> 